<template>
  <div class="home" ref="home">
    <div class="standard-container">
      <div class="standard-grid --padding-horizontal --auto-rows">

         <div class="home__welcome">welcome</div>

        <div class="home__logo">

           <div>
             <img src="../assets/imgs/icons/music.svg" alt="music">
             <span>To</span>
           </div>

        </div>

        <div class="home__name">
          <i>Rz-</i>Music
        </div>

        <div class="home__link">
          <nuxt-link to="/latest">Let's Go !</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import CommonFadeIn from '~/components/common/common-fade-in.vue'
    import {State} from "vuex-class";
    import {Actions, Store} from "../enums/Store";
    import {isLoginInterface, SkinInterface} from "../interfaces/PageInterface";

    @Component({
        components: {
          CommonFadeIn
        }
    })


    export default class Index extends Vue {
      @State(Store.Skin) skinValue:SkinInterface[Store.Skin]
      private isShow=false

      private themes=[{
        value:'0',
        background:'#054547'
      },{
        value:'1',
        background: '#5F5636'
      },{
        value:'2',
        background:'rgb(116, 3, 73)'
      },{
        value:'3',
        background:'#000'
      }
      ]

       private created(){
         if(process.browser){
           if(localStorage.getItem('themesBg')){
             this.$store.dispatch(Actions.GetSkin,localStorage.getItem('themesBg'))
           }else{
             this.$store.dispatch(Actions.GetSkin,'0')
           }
         }
       }

      private  mounted(){
        this.isShow=true
        this.themes.map((item,index)=>{
          if(item.value == this.skinValue){
            this.$refs.home.style.background=item.background
          }
        })
       }



    }
</script>

<style lang="scss">

  @include component(home){

    background: $bg;
    height: 100vh;
    color: $color-fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    %text-center {
     text-align: center;
    }

    @include part(welcome){

        grid-column: 1 / span 2;
        @include baseline($font-size-3125,$skip-lines:1,$auto-lines:false);
        @extend %text-center;
       animation: enter-right 800ms;

    }

    @include part(logo){

        grid-column: 1 / span 2 ;
        @include  baseline($font-size-3125,$skip:5);
        animation: enter-right 800ms;

        div{
          display: flex;
          justify-content: center;
        }
    }

    @include part(name){

      grid-column: 1 / span 2;
      @include baseline($font-size-3125,$skip:5);
      @extend %text-center;
      color:#67C23A ;
      font-weight: $font-weight-600;
      animation: enter-scale 800ms;
      animation-delay: 0.6s;

      i{
         background: linear-gradient(to right, orange, green);
         color: transparent;
        -webkit-background-clip: text;
         font-style: normal;
        font-weight: normal;

       }
    }

    @include part(link){

      grid-column: 1 / span 2;
      @include baseline($font-size-125,$skip:10);
      @extend %text-center;
      animation: shake 800ms;
      animation-delay: 1s;

      a{

        background: $color-fff;
        color: $color-656b79;
        padding: $mobile-row-1 1rem $mobile-row-1 3rem;
        position: relative;
        border-radius: 8px;

        &:hover{
          background: black;
          color: $color-fff;

          &:before{

            filter: brightness(0) invert(1);

          }
        }

        &:before{

           position: absolute;
           left: 5px;
           top: 5px;
           width:32px;
           height: 32px;
           content: "";
           background: url("../assets/imgs/icons/play-green.svg") no-repeat;

          }


      }

    }

    }

</style>

